<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
  <meta name="author" content="Webpixels">
  <title>评测系统</title>
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
  <!-- Theme CSS -->
  <link type="text/css" th:href="@{/css/theme.css}" rel="stylesheet">
  <link type="text/css" th:href="@{/scss/evaluation.css}" rel="stylesheet">
  <link type="text/css" th:href="@{/scss/my-pagination.css}" rel="stylesheet">
</head>
<body>
<div th:replace="~{common/header :: header}"></div>
<main class="main">
  <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen">
    <div class="spotlight-holder py-lg pt-lg-xl">
      <div class="container no-padding">
        <div class="row">
          <div class="col">
            <button type="button" class="btn btn-primary" style="margin-bottom: 50px" data-toggle="modal" data-target="#addClassModal">新增班级</button>
          </div>
        </div>
        <div class="row">
          <div class="col scrollbar-dynamic" style="overflow-x: scroll">
            <table class="table table-hover align-items-center" style="min-width: 760px">
              <thead class="thead-light">
              <tr>
                <th scope="col">序号</th>
                <th scope="col">名称</th>
                <th scope="col">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="class, status : ${pageData.records}">
                <td th:text="${status.index + 1}"></td>
                <td th:text="${class.esClassName}">优才班</td>
                <td>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addStudentModal" th:onclick="'selectCurClass(' + ${class.esClassId} + ')'">添加学生</button>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addStudentGroupModal" th:data-classId="${class.esClassId}" onclick="selectAddStuGroup(this)">添加分组</button>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-dark" th:onclick="'location.href = \'/manageStudent?classId=' + ${class.esClassId} + '\''">查看学生</button>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-dark" th:onclick="'location.href = \'/manageGroup?classId=' + ${class.esClassId} + '\''">查看分组</button>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#updateClassModal" th:data-classId="${class.esClassId}" th:data-className="${class.esClassName}" onclick="updateClass(this)">更新</button>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteClassModal" th:data-classId="${class.esClassId}" onclick="deleteClass(this)">删除</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row">
          <div id="Paginator" class="col" style="text-align: center">
            <ul id="pageLimit"></ul>
          </div>
        </div>
      </div>
      <!-- 模态框 -->
      <div class="modal fade modal-dialog-scrollable" id="addClassModal" tabindex="-1" aria-labelledby="addClassModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addClassModalLabel">添加班级</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="addClassForm" method="post" th:action="${#servletContext.contextPath + '/manageClass/addClass'}">
                <div class="form-group">
                  <label for="class-name" class="col-form-label">班级名称</label>
                  <input type="text" name="className" class="form-control" id="class-name">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitAddClassForm()">添加</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="addStudentModal" tabindex="-1" aria-labelledby="addStudentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addStudentModalLabel">添加学生</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="addStudentForm" method="post" th:action="${#servletContext.contextPath + '/manageClass/addStudent'}">
                <input type="text" id="addStudentFormClassId" name="classId" hidden="hidden">
                <div class="form-group">
                  <label for="student-sno" class="col-form-label">学号</label>
                  <input type="text" name="sno" class="form-control" id="student-sno">
                </div>
                <div class="form-group">
                  <label for="student-name" class="col-form-label">姓名</label>
                  <input type="text" name="name" class="form-control" id="student-name">
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="exampleRadios1" value="1" checked>
                  <label class="form-check-label" for="exampleRadios1">男</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="exampleRadios2" value="2">
                  <label class="form-check-label" for="exampleRadios2">女</label>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="unSelectCurClass()">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitAddStudentForm()">添加</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="addStudentGroupModal" tabindex="-1" aria-labelledby="addStudentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addStudentGroupModalLabel">添加分组</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="addStudentGroupForm" method="post" th:action="${#servletContext.contextPath + '/manageClass/addGroup'}">
                <input type="text" id="addStudentGroupFormClassId" name="classId" hidden="hidden">
                <div class="form-group">
                  <label for="student-sno" class="col-form-label">组名</label>
                  <input type="text" name="groupName" class="form-control" id="group-name">
                </div>
                <div class="form-group">
                  <label for="student-sno" class="col-form-label">组号</label>
                  <input type="text" name="groupNum" class="form-control" id="group-num">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitAddStudentGroupForm()">添加</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="updateClassModal" tabindex="-1" aria-labelledby="updateClassModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="showModalLabel">更新班级</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="updateClassForm" method="post" th:action="${#servletContext.contextPath + '/manageClass/updateClass'}">
                <input type="hidden" id="updateClassInput" name="classId">
                <div class="form-group">
                  <label for="class-name" class="col-form-label">班级名称</label>
                  <input type="text" name="className" class="form-control" id="updateClassNameInput">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitUpdateClassForm()">更新</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="deleteClassModal" tabindex="-1" aria-labelledby="deleteClassModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteClassModalLabel">删除班级</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="deleteClassForm" method="post" th:action="${#servletContext.contextPath + '/manageClass/deleteClass'}">
                <input type="hidden" id="deleteClassInput" name="classId">
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitDeleteClassForm()">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
<div th:replace="~{common/footer :: footer}"></div>
</body>
<script th:src="@{/js/bootstrap-paginator.min.js}"></script>
<script>
  var curClassId;
  function selectCurClass(id) {
    curClassId = id;
  }
  function unSelectCurClass() {
    curClassId = 0;
  }
  function submitAddClassForm() {
    var addClassForm = $("#addClassForm");
    addClassForm.submit();
  }
  function submitAddStudentForm() {
    var addStudentForm = $("#addStudentForm");
    $("#addStudentFormClassId").val(curClassId);
    addStudentForm.submit();
    unSelectCurClass();
  }

  function deleteClass(e) {
    $("#deleteClassInput").val(e.getAttribute("data-classId"));
  }

  function submitDeleteClassForm() {
    $("#deleteClassForm").submit();
    $("#deleteClassInput").val(0);
  }

  function updateClass(e) {
    $("#updateClassInput").val(e.getAttribute("data-classId"));
    $("#updateClassNameInput").val(e.getAttribute("data-className"));
  }

  function submitUpdateClassForm() {
    $("#updateClassForm").submit();
    $("#updateClassInput").val(0);
    $("#updateClassNameInput").val('');
  }

  function selectAddStuGroup(e) {
    $("#addStudentGroupFormClassId").val(e.getAttribute("data-classId"));
  }

  function submitAddStudentGroupForm() {
    $("#addStudentGroupForm").submit();
  }

  $('#pageLimit').bootstrapPaginator({
    currentPage: [[${pageData.current}]] || 1 ,
    totalPages: [[${pageData.total}]],
    size:"normal",
    bootstrapMajorVersion: 3,
    alignment:"right",
    numberOfPages: [[${pageData.size}]],
    pageUrl:function (type,page,current) {
      //是每个分页码变成一个超链接
      return '?curPage=' + page + '&pageSize=6';
    },
    itemTexts: function (type, page, current) {
      switch (type) {
        case "first": return "首页";
        case "prev": return "上一页";
        case "next": return "下一页";
        case "last": return "末页";
        case "page": return page;
      }
    }
    /*onPageClicked:function (event, originalEvent, type, page) {
           location.href = "?page="+page;
    }*/
  });
</script>
</html>
